<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test"></div>
    <div id="dome1"></div>
    <div id="dome2"></div>
    <div id="dome3"></div>
     <!-- 1引入核心 -->
     <script type="text/javascript" src="./js/react.development.js"></script>
     <!-- 2扩展库-->
     <script type="text/javascript" src="./js/react-dom.development.js"></script>
     <!-- 3引入babel，用于将jsx转为js-->
     <script type="text/javascript" src="./js/babel.min.js"></script>
    <!-- 用于对组件标签属性进行限制 -->
    <script type="text/javascript" src="./js/prop-types.js"></script>

     <!-- 1.渲染多个内容 -->
     <!-- <script type="text/babel">
       class FunMain extends React.Component{
            //对标签属性进行类型、必要性的限制
            static propTypes = {
            //name:React.PropTypes.string//15.xxxx版本有16版本后就弃用了
                name:PropTypes.string.isRequired,//限制name必须传，并且为字符串
                gloup:PropTypes.string,
               
                age:PropTypes.number,
                //引入之后全局就会多一个对象PropTypes
            }

            //指定默认标签属性
            static defaultProps = {
                age:15//如果age没有值,默认就显示15
            }

           render(){
               const {name,age,gloup} = this.props
               return(
               <ul>
                    <li>你的名字：{name}</li>
                    <li>你的年龄：{age}</li>
                    <li>你的年级：{gloup}</li>
               </ul>
               )
           }
       }
       const p = {name:'小强',age:18,gloup:'高1'}
       ReactDOM.render(<FunMain name='小坏蛋' age={18} gloup='高一' />,document.getElementById('dome1'))
       ReactDOM.render(<FunMain name='小王' age={1} gloup='高三' />,document.getElementById('dome2'))
       ReactDOM.render(<FunMain {...p} />,document.getElementById('dome3'))
    </script> -->



    <!-- 2.做一个动态去点击 -->
    <!-- <script type="text/babel">
        class Module extends React.Component{
            state = {ishot:false,weifeng:true}
            render(){
                const {ishot} = this.state;
                return <h1 onClick={this.ChangClick}>今天天气很{ishot? '凉爽' : '炎热'}</h1>
            }
            ChangClick = () =>{
                const {ishot} = this.state
                this.setState({ishot:!ishot})
            }
        }
    
        ReactDOM.render(<Module/>,document.getElementById('test'))
    </script> -->



    <!-- 3.input输入点击按钮弹出，失去聚焦事件-->
    <!-- <script type="text/babel">
        class Refun extends React.Component{
            state = {name:'纯'}
            myRef = React.createRef();
            render(){
                return(
                   <div>
                       <input ref={c => this.ipt1 = c}  type="text"/>
                       <input ref={this.myRef}  type="text"/>
                       <button onClick = {this.BtnClick}>点击</button>
                       <input  onBlur={this.BtnBlur} type="text"/>
                   </div>
               )
            }

            BtnClick = () =>{
                const {current} = this.myRef
                const {ipt1} = this
               alert(ipt1.value)
            }

            BtnBlur = (event) =>{
                let value = event.target.value
               alert(value)
            }
        } 
        ReactDOM.render(<Refun a='1' />,document.getElementById('dome1'))
    </script> -->



    <!-- 4.获取表单数据并传入 -->
    <!-- <script type="text/babel">
        class Myinput extends React.Component{
            //初始化状态
            state = {
                username:'',//用户名
                password:''
            }

            saveFromData = (dataType) =>{
               return (event) =>{
                    this.setState({[dataType]:event.target.value})
               }
            }

            //表单提交的回调
            Getgoin = (event) =>{
                event.preventDefault()
                const {username,password} = this.state
                alert(`您输入的是：${username},密码是：${password}`)
            }

            render(){
                return(
                        <form  action="http://www.atguigu.com" onSubmit = {this.Getgoin}>
                            <span>用户名：</span>
                            <input onChange={this.saveFromData('username')} type="text" name='username'/>
                            <span>密码：</span>
                            <input onChange={this.saveFromData('password')}  type="password" name='password'/>
                            <button >登录</button>
                        </form>
                   
                )
            }
        }

        const p = {name:'刘纯',age:18}
        ReactDOM.render(<Myinput {...p}/>,document.getElementById('test'))
    </script> -->


    



    <!-- 5.定时器的使用 -->
    <!-- <script type="text/babel">
        class Count extends React.Component{
            constructor(props){
                console.log('1.构造器-Count-constructor')
                super(props)
                //初始化状态
                this.state = {count:0}
            }
           

            //加1按钮的回调
            add = () =>{
                const {count} = this.state
                console.log('更新模式1','1.更新状态-setState')
                //更新状态
                this.setState({
                    count:count+1
                })
            }
           
            componentWillMount(){//组件将要挂载
                console.log('2.组件将要挂载-Count-componentWillMount')

            }

            componentDidMount(){//组件挂载完毕之后
                console.log('4.组件挂载之后-Count-componentDidMount')
            }

            componentWillUnmount(){//组件将要卸载
                console.log('6.组件将要卸载-Count-componentWillUnmount')
            }


             //组件将要卸载的钩子-控制组件更新的阀门-如果不写默认是true,
             shouldComponentUpdate(){
                console.log('更新模式1','2.组件将要卸载的钩子-shouldComponentUpdata')
                return true //阀门
             }

             //组件将要更新
             componentWillUpdate(){
                console.log('更新模式1','3.组件将要更新-componentWillUpdate')
                console.log('更新模式2','2.强制更新-componentWillUpdate')
             }

             //组件更新完毕的钩子
             componentDidUpdate(){
                console.log('更新模式1','5.组件更新完毕的钩子-componentDidUpdate')
                console.log('更新模式2','4.组件更新完毕的钩子-componentWillUpdate')
             }

            
            death = () =>{//组件卸载,不再渲染html
                console.log('5.组件卸载,不再渲染html-Count-unmountComponentAtNode')
                ReactDOM.unmountComponentAtNode(document.getElementById('test'))
            }


            //强制更新
            fore = () =>{
                console.log('更新模式2','1.强制更新-forceUpdate')

               this.forceUpdate()
            }


            render(){
                console.log('3.渲染组件-Count-render')

                const {count} = this.state

                return(
                    <div>
                        <h2>当前求和为：{count}</h2>    
                        <button onClick={this.add}>点我+1</button>
                        <button onClick={this.death}>卸载组件</button>
                        <button onClick={this.fore}>不更改任何状态中的数据，强制更新一下</button>


                    </div>
                )
            }
        }

        class A extends React.Component{
            //初始化状态
            state = {carName:'奔驰'}

            changeCar = () =>{
                this.setState({
                    carName:'奥托'
                })
            }

            render(){
                return(
                   <div>
                        <div>A</div>
                        <button onClick={this.changeCar}>换车</button>
                        <B carName={this.state.carName}/>
                    </div>  
                )
            }
        }


        class B extends React.Component{
            componentDidMount(){
                console.log('更新模式3','1.这是个坑-组件挂载之后-componentDidMount')
            }
            //组件将要接收新的props的钩子
            componentWillReceiveProps(){
                console.log('更新模式3','2.组件将要接收新的props的钩子-componentWillReceiveProps')
            }

             //组件将要卸载的钩子-控制组件更新的阀门-如果不写默认是true,
             shouldComponentUpdate(){
                console.log('更新模式3','3.组件将要卸载的钩子-shouldComponentUpdata')
                return true //阀门
             }
              //组件将要更新
              componentWillUpdate(){
                console.log('更新模式3','4.组件将要更新-componentWillUpdate')
             }

             //组件更新完毕的钩子
             componentDidUpdate(){
                console.log('更新模式3','6.组件更新完毕的钩子-componentDidUpdate')
             }
            render(){
                console.log('更新模式3','5.组件渲染html-render')

                return(
                    <div>我是B组件，接收到的车是：{this.props.carName }</div>
                )
            }
        }
        ReactDOM.render(<A/>,document.getElementById('test'))
    </script> -->


    
</body>
</html>